<template>
  <div>
    <el-card shadow="never">
      <div slot="header">
        <span>{{ $t('今日总览') }}</span>
      </div>
      <div style="width: 100%;display: flex;">
        <div class="col">
          <div class="page_col ">
            <div style="display:flex;align-items: center;padding: 0px 10px">
              <div style="text-align: left;margin-top:5px;margin-right:10px">
                <div style="margin-bottom: 10px;word-break: break-word">{{ $t('新增数') }}</div>
                <div><span style="font-size:20px;color: #1269F3">{{ overViewData.totalOrderNum }}</span></div>
              </div>
              <div style="flex:1;text-align:right">
                <img class="img" src="../../../../assets/home_remindPage/img_5.png">
              </div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="page_col ">
            <div style="display:flex;align-items: center;padding: 0px 10px">
              <div style="text-align: left;margin-top:5px;margin-right:10px">
                <div style="margin-bottom: 10px;word-break: break-word">{{ $t('展期数') }}</div>
                <div><span style="font-size:20px;color: #42CD89;">{{ overViewData.rollOrderNum }}</span></div>
              </div>
              <div style="flex:1;text-align:right">
                <img class="img" src="../../../../assets/home_remindPage/img_4.png">
              </div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="page_col ">
            <div style="display:flex;align-items: center;padding: 0px 10px">
              <div style="text-align: left;margin-top:5px;margin-right:10px">
                <div style="margin-bottom: 10px;word-break: break-word">{{ $t('还款应还数') }}</div>
                <div><span style="font-size:20px;color: #33A8E3;">{{ overViewData.repaymentOrderNum }}</span></div>
              </div>
              <div style="flex:1;text-align:right">
                <img class="img" src="../../../../assets/home_remindPage/img_3.png">
              </div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="page_col ">
            <div style="display:flex;align-items: center;padding: 0px 10px">
              <div style="text-align: left;margin-top:5px;margin-right:10px">
                <div style="margin-bottom: 10px;word-break: break-word">{{ $t('结清数') }}</div>
                <div><span style="font-size:20px;color: #7A76E2">{{ overViewData.settleOrderNum }}</span></div>
              </div>
              <div style="flex:1;text-align:right">
                <img class="img" src="../../../../assets/home_remindPage/img_2.png">
              </div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="page_col ">
            <div style="display:flex;align-items: center;padding: 0px 10px">
              <div style="text-align: left;margin-top:5px;margin-right:10px">
                <div style="margin-bottom: 10px;word-break: break-word">{{ $t('待还数') }}</div>
                <div><span style="font-size:20px;color: #FF4167;">{{ overViewData.stayOrderNum }}</span></div>
              </div>
              <div style="flex:1;text-align:right">
                <img class="img" src="../../../../assets/home_remindPage/img_1.png">
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <div style="margin-top: 15px;display: flex;">
      <el-card shadow="never" :body-style="{padding:'10px'}" style="width:64%;margin-right: 1%">
        <div slot="header">
          <span>{{ $t('工作质量') }}</span>
        </div>
        <el-tabs v-model="qualityActive" @tab-click="getQuality">
          <el-tab-pane :label="$t('天业绩')" name="1"></el-tab-pane>
          <el-tab-pane :label="$t('周业绩')" name="2"></el-tab-pane>
          <el-tab-pane :label="$t('月业绩')" name="3"></el-tab-pane>
          <Table :page="false" border :table-data="qualityTableData">
            <el-table-column :label="$t('时间')" align="center" prop="time"></el-table-column>
            <el-table-column :label="$t('结清数')" align="center" prop="settleOrderNum"></el-table-column>
            <el-table-column :label="$t('展期数')" align="center" prop="rollOrderNum"></el-table-column>
            <el-table-column :label="$t('还款实还率')" align="center" prop="actualRate"></el-table-column>
            <el-table-column :label="$t('综合率')" align="center" prop="comprehensiveRate"></el-table-column>
            <el-table-column :label="$t('当日复借率')" align="center" prop="reSettleRate"></el-table-column>
          </Table>
        </el-tabs>
      </el-card>
      <el-card shadow="never" :body-style="{padding:'10px'}" style="width:35%">
        <div slot="header">
          <span>{{ $t('我的排行') }}</span>
        </div>
        <el-tabs v-model="rankActive" @tab-click="getRanking">
          <el-tab-pane :label="$t('综合率')" name="1"></el-tab-pane>
          <el-tab-pane :label="$t('复借率')" name="2"></el-tab-pane>
          <Table :page="false" border :tableColumn="rankTableColumn" :table-data="rankTableData">
          </Table>
        </el-tabs>
      </el-card>
    </div>

    <div style="margin-top: 15px;display: flex;">
      <el-card shadow="never" :body-style="{padding:'15px'}" style="width:100%;">
        <div slot="header">
          <span>{{ $t('曲线图') }}</span>
        </div>

        <div style="display:flex;justify-content: space-between">
          <el-tabs v-model="chartsActive" @tab-click="getCharts">
            <el-tab-pane :label="$t('综合率')" name="0"></el-tab-pane>
            <el-tab-pane :label="$t('当日复借率')" name="1"></el-tab-pane>
          </el-tabs>
          <div style="text-align: right">
            <el-radio-group v-model="chartsType" @change="getCharts" size="mini">
              <el-radio-button :label="0">{{ $t('近7天') }}</el-radio-button>
              <el-radio-button :label="1">{{ $t('近30天') }}</el-radio-button>
              <el-radio-button :label="2">{{ $t('近1年') }}</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <ve-line height="400px" :data="chartsData" :extend="chartsExtend"
                 :settings="amountSettings"
                 ref="charts1"></ve-line>
      </el-card>
    </div>
  </div>
</template>

<script>
import {fetchHomeOverview, fetchHomeQuality, fetchHomeMyRanking, fetchHomeChartsData} from '@/api/postLoan'
import VeLine from 'v-charts/lib/line.common'

export default {
  name: "personalData",
  components: {
    VeLine
  },
  props: {
    productName: {},
    guestGroupId: {}
  },
  data() {
    return {
      rankTableColumn: [
        {label: this.$t('类别'), prop: 'typeName', align: 'center'},
        {label: this.$t('组内排名'), prop: 'group', align: 'center'},
        {label: this.$t('公司排名'), prop: 'company', align: 'center'},
      ],
      rankTableData: [],
      qualityTableData: [],
      qualityData: [],
      chartsType: 0,
      overViewData: {},
      qualityActive: '1',
      rankActive: '1',
      chartsExtend: {
        color: ['#F1B901'],
        series: {
          smooth: false
        },
        grid: {
          right: 30
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              color: '#eeeeee'
            }
          },
          axisLabel: {}
        },
        tooltip: {
          formatter: (params) => {
            let res = '<div style="margin-bottom: 5px">' + params[0].axisValue + '</br>'
            for (let i = 0; i < params.length; i++) {
              res += params[i].marker + params[i].seriesName + ': ' + params[i].value[1] + '%' + '</br>'
            }
            return res + '</div>'
          }
        }
      },
      amountSettings: {
        yAxisName: [this.$t('单位') + ': %'],
        labelMap: {
          dateStr: this.$t('日期'),
          rate: this.$t('处理效率'),
        },
      },
      chartsData: {
        columns: ['dateStr', 'rate',],
        rows: []
      },
      chartsActive: '0'
    }
  },
  computed: {
    lastWeekPassRate() {
      const value = this.qualityData.find(item => item.type === 2)
      return value ? value.passRate : 0
    }
  },
  watch: {
    productName() {
      this.getData()
    },
    guestGroupId: {
      handler(value) {
        if (value) {
          this.getData()
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    getData() {
      this.getQuality()
      this.getOverView()
      this.getRanking()
      this.getCharts()
    },
    // 获取今日总览
    async getOverView() {
      const res = await fetchHomeOverview({productName: this.productName || null, guestGroupId: this.guestGroupId})
      if (res.code === 1) {
        this.overViewData = res.data
      }
    },
    // 获取工作质量
    async getQuality() {
      const res = await fetchHomeQuality({
        productName: this.productName || null, guestGroupId: this.guestGroupId,
        briefType: this.qualityActive === '1' ? 0 : this.qualityActive === '2' ? 1 : 2
      })
      if (res.code === 1) {
        const data = res.data
        const dateTitle = {
          'day1': this.$t('今日'),
          'day2': this.$t('本周'),
          'day3': this.$t('本月'),
          'yesterday1': this.$t('昨日'),
          'yesterday2': this.$t('上周'),
          'yesterday3': this.$t('上月'),
        }
        const dataValue1 = this.qualityActive === '1' ? 'today' : this.qualityActive === '2' ? 'thisWeek' : 'thisMonth'
        const dataValue2 = this.qualityActive === '1' ? 'yesterday' : this.qualityActive === '2' ? 'lastWeek' : 'lastMonth'
        this.qualityTableData = [
          {
            time: dateTitle['day' + this.qualityActive],
            comprehensiveRate: data[dataValue1].comprehensiveRate,
            actualRate: data[dataValue1].actualRate,
            rollOrderNum: data[dataValue1].rollOrderNum,
            settleOrderNum: data[dataValue1].settleOrderNum,
            reSettleRate: data[dataValue1].reSettleRate,
          },
          {
            time: dateTitle['yesterday' + this.qualityActive],
            comprehensiveRate: data[dataValue2].comprehensiveRate,
            actualRate: data[dataValue2].actualRate,
            rollOrderNum: data[dataValue2].rollOrderNum,
            settleOrderNum: data[dataValue2].settleOrderNum,
            reSettleRate: data[dataValue2].reSettleRate
          }
        ]
      }
    },
    // 获取个人排名
    async getRanking() {
      const res = await fetchHomeMyRanking({productName: this.productName || null, guestGroupId: this.guestGroupId})
      if (res.code === 1) {
        // 获取综合率
        const comprehensiveRate = [
          {
            typeName: this.$t('上周综合率'),
            company: res.data.lastWeekComprehensiveRate.company,
            group: res.data.lastWeekComprehensiveRate.group
          },
          {
            typeName: this.$t('本周综合率'),
            company: res.data.thisWeekComprehensiveRate.company,
            group: res.data.thisWeekComprehensiveRate.group
          },
        ]
        // 获取复借率
        const reSettleRate = [
          {
            typeName: this.$t('上周当日复借率'),
            company: res.data.lastWeekReSettleRate.company,
            group: res.data.lastWeekReSettleRate.group
          },
          {
            typeName: this.$t('本周当日复借率'),
            company: res.data.thisWeekReSettleRate.company,
            group: res.data.thisWeekReSettleRate.group
          },
        ]
        const data = this.rankActive === '1' ? comprehensiveRate : reSettleRate
        this.rankTableData = data
      }
    },
    // 获取个人曲线图
    async getCharts() {
      const res = await fetchHomeChartsData({
        productName: this.productName || null,
        dateType: this.chartsType,
        authType: 0,
        dataType: parseInt(this.chartsActive),
        guestGroupId: this.guestGroupId
      })
      if (res.code === 1) {
        this.chartsData.rows = res.data
        this.$set(this.amountSettings.labelMap, 'rate', this.chartsActive === '0' ? this.$t('综合率') : this.$t('当日复借率'))
        this.$refs.charts.resize()
      }
    },
  }
}
</script>

<style scoped lang="less">
.col {
  width: 25%;
  padding: 0 10px;
}

.page_col {
  background-color: #fff;
  color: #333333;
  border: 1px solid #F0F2F5;
  box-sizing: border-box;
  padding: 20px 0;

  .img {
    height: 72px;
    width: 72px;
  }
}

</style>
